<template>

  <el-card style="width: 500px"  v-if="!user.idCard">

    <el-form :model="form" label-width="80px" >

        <el-form-item label="请输入你的身份证号"  label-width="40">
          <el-input v-model.trim="form.idCard" autocomplete="off"></el-input>
        </el-form-item>


        <el-form-item label="请输入你的手机号"  label-width="40">
          <el-input v-model.trim="form.phone" autocomplete="off"></el-input>
        </el-form-item>



        <el-form-item label="用户id"  label-width="40" >
          <el-input v-model="user.userId" autocomplete="off"></el-input>
        </el-form-item>



      <el-form-item>
            <el-button type="primary" @click="bind" >身份绑定</el-button>
      </el-form-item>

    </el-form>


  </el-card>

    <el-row v-else="user.idCard">
      <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="user.headImage" class="image">
          <div style="padding: 14px;">
            <span>  您已完成身份绑定，快去试试免押金租借充电宝吧！</span>
            <div class="bottom clearfix">
              <time class="time">{{ currentDate }}</time>
              <el-button type="primary" class="button" @click="toPb">前往充电宝租借</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

</template>

<script>
import request from "@/util/request";


export default {
  name:"identityBind",
  data(){
    return{
      form:{
        idCard:'',
        phone:'',
        userId:''
      },


      user: localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{}
    }
  },
  created() {

  },
  methods:{
    async getUser(){
      return  (await request.get("/user/userId/" + this.user.userId)).data;
    },

    bind(){
      this.$set(this.form, 'userId', this.user.userId);

      request.post("/bind",this.form).then(res=>{

        if(res){
          console.log(this.form)
          this.$message.success("身份绑定成功！")

          this.getUser().then(res => {
            res.token = JSON.parse(localStorage.getItem("user")).token
            localStorage.setItem("user", JSON.stringify(res))
          })
        }else {
          this.$message.error("身份绑定失败！")
        }
      })
    },
    toPb(){
      this.$router.push('/userPbPage')
    }

  }
}

</script>

<style>

</style>